<template>
  <div class="helloWorld">
    <div class="tree">
      <el-tree
        node-key="id"
        default-expand-all
        :highlight-current="true"
        :expand-on-click-node="false"
        :data="data"
        :props="defaultProps"
        @node-click="nodeClick"
        ref="tree"
      >
      </el-tree>
    </div>
    <div class="table maList" ref="maList" @dragover.prevent @drop="ondrop">
      <click-map
        @addBitmap="addBitmap"
        :detailTable="detailTable"
        :pointPosition="equipmentData"
        :isTrue="isTrue"
        :num="num"
        :popover="popover"
        @zoom="zoom"
        v-if="detailTable.url"
        :drag="true"
        ref="clickMap"
      />
    </div>
    <div class="tree">
      <el-tree
        node-key="id"
        default-expand-all
        :highlight-current="true"
        :expand-on-click-node="false"
        :data="equipmentData"
        :props="defaultProps"
        ref="tree"
      >
        <span class="custom-tree-node" slot-scope="{ data }">
          <span>{{ data.label }}</span>
          <span>
            <i
              v-if="!data.url"
              :draggable="true"
              @dragstart="dragstart(data)"
              class="el-icon-location-information xiaoshou"
            ></i>
            <i
              v-else
              @click="deteleEvent(data)"
              class="el-icon-close xiaoshou"
            ></i>
          </span>
        </span>
      </el-tree>
    </div>
  </div>
</template>

<script>
import ClickMap from "./clickMap.vue";
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';

export default {
  // import引入的组件需要注入到对象中才能使用
  components: { ClickMap },
  data() {
    // 这里存放数据
    return {
      data: [
        {
          id: 1,
          label: "一楼",
          url:
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F667b5f2c-8e04-4152-9455-6916d0d981e9%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1690443361&t=ba5c8fa8055fa5be0d8052e84d277686",
          children: [
            {
              id: 2,
              label: "一楼1栋",
              url:
                "https://img.kinpan.com/Files/design/detailimages/20210305/637505540902037953392358.jpg",
            },
            {
              id: 3,
              label: "一楼2栋",
              url:
                "https://img2.baidu.com/it/u=728352435,1174956831&fm=253&fmt=auto&app=138&f=JPEG?w=903&h=500",
            },
          ],
        },
        {
          id: 4,
          label: "二楼",
          url:
            "https://www.zx123.cn/uploadfile/2015/0928/20150928163643_10907.jpg",
          children: [
            {
              id: 5,
              label: "二楼1栋",
              url:
                "https://img0.baidu.com/it/u=3722021633,552941295&fm=253&fmt=auto&app=138&f=JPEG?w=756&h=500",
            },
            {
              id: 6,
              label: "二楼2栋",
              url:
                "https://img2.baidu.com/it/u=4292356649,2681536413&fm=253&fmt=auto&app=138&f=JPEG?w=615&h=500",
            },
          ],
        },
      ],
      equipmentData: [
        {
          id: 1,
          label: "摄像头1",
          leftName: 11,
          topName: 22,
          iconColor: "red",
          fontSize: 18,
          url: "el-icon-video-camera-solid",
        },
        {
          id: 2,
          label: "摄像头2",
          leftName: 101,
          topName: 82,
          iconColor: "red",
          fontSize: 18,
          url: "el-icon-video-camera-solid",
        },
        {
          id: 3,
          label: "摄像头3",
        },
        {
          id: 4,
          label: "摄像头4",
        },
        {
          id: 5,
          label: "摄像头5",
        },
        {
          id: 6,
          label: "摄像头6",
        },
        {
          id: 7,
          label: "摄像头7",
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      /*--------------------------------*/
      popover: false, //悬浮在图标上的弹窗
      detailTable: {}, //图片
      isTrue: true, //是否允许拖动
      checkedTable: {}, //保存拖动要打点设备的参数

      num: 1, //放大缩小倍数
      /*--------------------------------*/
    };
  },
  // 计算属性类似于data概念
  computed: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getList();
  },
  // 方法集合
  methods: {
    nodeClick(data, node) {
      console.log(data);

      this.detailTable = data;
    },
    getList() {
      this.$nextTick(function () {
        this.num = (this.$refs.maList.offsetHeight - 90) / 300;
        console.log(this.num);
        this.$refs.tree.setCurrentKey(1);
        this.detailTable = this.data[0];
        console.log(this.detailTable);
      });
    },
    //相当于深拷贝
    deepClone(obj) {
      let _obj = JSON.stringify(obj),
        objClone = JSON.parse(_obj);
      return objClone;
    },
    // 打点之后返回的坐标系数
    addBitmap(data) {
      console.log(this.checkedTable);
      this.checkedTable.topName = data.topName;
      this.checkedTable.leftName = data.leftName;
      this.checkedTable.iconColor = "red";
      this.checkedTable.fontSize = 18;
      this.checkedTable.url = "el-icon-video-camera-solid";
      this.equipmentData.forEach((element, index) => {
        if (element.id == this.checkedTable) {
          this.equipmentData[index] = this.checkedTable;
        }
      });
      this.isTrue = !this.isTrue;
      //刷新一下数据，赋值的数据页面没更新，对接口更新就可以省略这一步了
      this.equipmentData = this.deepClone(this.equipmentData);
    },
    // 放大缩小
    zoom(value) {
      if (value == "放大") {
        this.num += 0.1;
      } else {
        this.num -= 0.1;
      }
    },
    deteleEvent(data) {
      delete data.url;
      delete data.topName;
      delete data.leftName;
      //刷新一下数据，赋值的数据页面没更新，对接口更新就可以省略这一步了
      this.equipmentData = this.deepClone(this.equipmentData);
    },
    dragstart(data) {
      this.checkedTable = data;
      this.isTrue = false;
      console.log("长按拖动中");
    },
    ondrop(e) {
      console.log("长按松开了");
      this.$refs.clickMap.ondrop(e);
    },
  },
};
</script>
<style lang="scss">
.helloWorld {
  height: 90vh;
  display: flex;
}
.helloWorld .tree {
  width: 250px;
  padding: 5px;
  border: 1px solid red;
  .el-tree-node__content {
    width: 100%;
    display: flex;
    padding-left: 0 !important;
    .custom-tree-node {
      flex: 1;
      i {
        float: right;
        margin-right: 10px;
      }
    }
  }
}
.helloWorld {
  .table {
    flex: 1;
  }
  .maList {
    display: flex;
    flex: 1;
    // background: #0ecc67;
    align-items: center;
    text-align: center;
  }
}
</style>